<!DOCTYPE HTML>
<html>
<head>
<style>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map-canvas { height: 100% }
.labels {
  font-family: Lucida Sans Unicode;
  font-size: 11px;
  background: white;
  border: 1px solid #DDD;
  border-radius: 5px;
  box-shadow: 0 0 5px #DDD inset;
  padding: 5px 10px;
  outline: none;
  white-space: nowrap;
}
</style>

</head>
<body>
    <div class="featured-list" id="map-canvas"></div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.15&sensor=false"></script>
    <script src="/../js/markerwithlabel_packed.js"></script>
    <script>
        $(function(){
            var myLatlng = new google.maps.LatLng({{ data.records[data.records|length - 1].lat }}, {{ data.records[data.records|length - 1].lng }});
            var myOptions = {
                zoom: 15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: [{"featureType":"water","stylers":[{"color":"#19a0d8"}]},{"featureType":"administrative","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"},{"weight":6}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#e85113"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#efe9e4"},{"lightness":-40}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#efe9e4"},{"lightness":-20}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"lightness":100}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"lightness":-100}]},{"featureType":"road.highway","elementType":"labels.icon"},{"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape","stylers":[{"lightness":20},{"color":"#efe9e4"}]},{"featureType":"landscape.man_made","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":100}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":-100}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"hue":"#11ff00"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"lightness":100}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"hue":"#4cff00"},{"saturation":58}]},{"featureType":"poi","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#f0e4d3"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#efe9e4"},{"lightness":-25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#efe9e4"},{"lightness":-10}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"simplified"}]}]
            };
            
            var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
            
            var lat_lng = new Array();
            {% set interval = 1 / data.records|length %}
	            {% for itm in data.records %}
	            var myLatLng = new google.maps.LatLng({{ itm.lat }}, {{ itm.lng }});
	            lat_lng.push(myLatLng);

	            
              {% set diff = 0 %}
	            {% if (loop.index < data.records|length) %}
                {% set diff = data.records[loop.index].date|date('U') - itm.date|date('U') %}
	            {% endif %}
	
	            {% if (loop.index == 1 or loop.index == data.records|length or diff > 600) %}
	            var marker = new MarkerWithLabel({
		              position: myLatLng,
		              map: map,
		              labelContent: "{{ itm.date|date('H:i') }} - {{ data.records[loop.index].date|date('H:i') }}",
		              labelAnchor: new google.maps.Point(22, 50),
		              labelClass: "labels", // the CSS class for the label
		              labelStyle: { opacity: 0.75 }
		          });
	            {% endif %}
            
            {% endfor %}

            //Intialize the Path Array
            var path = new google.maps.MVCArray();
     
            //Intialize the Direction Service
            var service = new google.maps.DirectionsService();
     
            //Set the Path Stroke Color
            var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
     
            //Loop and Draw Path Route between the Points on MAP
            for (var i = 0; i <= lat_lng.length; i++) {
                if (i > 0) {
                    var src = lat_lng[i - 1];
                    var des = lat_lng[i];
                    path.push(src);
                    poly.setPath(path);
                    service.route({
                        origin: src,
                        destination: des,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    }, function (result, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
//                             for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
//                                 path.push(result.routes[0].overview_path[i]);
//                             }
                        }
                    });
                }
            }


        });
        
</script>

</body>
</html>